<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3实现图文轮播焦点图插件DEMO演示</title>

<link rel="stylesheet" href="themes/csslider.default.css" />
<style>

	* {
		margin: 0;
		padding: 0;
	}

	::-webkit-scrollbar {
		width: 2px;
		background: rgba(255, 255, 255, 0.1);
	}

	::-webkit-scrollbar-track {
		background: none;
	}

	::-webkit-scrollbar-thumb {
		background: rgba(74, 168, 0, 0.6);
	}

	ul, ol {
		padding-left: 40px;
	}

	html, body {
		height: 100%;
		text-align: center;
		font: 400 100% 'Raleway', 'Lato';
		background-color: #282828;
		color: #CCC;
	}

	h1 {
		font-weight: 700;
		font-size: 310%;
	}

	h2 {
		font-weight: 400;
		font-size: 120%;
		color: #71AD37;
	}

	#slider1 {
		margin: 20px;
		font-family: 'Lato';
	}

		#slider1 > ul > li:nth-of-type(3) {
			background: url(./themes/fruit.jpg);
		}

		#slider1 > input:nth-of-type(3):checked ~ ul #bg {
			width: 80%;
			padding: 22px;
			-moz-transition: .5s .5s;
			-o-transition: .5s .5s;
			-webkit-transition: .5s .5s;
			transition: .5s .5s;
		}

			#slider1 > input:nth-of-type(3):checked ~ ul #bg div {
				-moz-transform: translate(0);
				-ms-transform: translate(0);
				-o-transform: translate(0);
				-webkit-transform: translate(0);
				transform: translate(0);
				-moz-transition: .5s .9s;
				-o-transition: .5s .9s;
				-webkit-transition: .5s .9s;
				transition: .5s .9s;
			}

	#bg {
		color: #000;
		padding: 22px 0;
		position: absolute;
		left: 0;
		top: 16%;
		height: 20%;
		width: 0;
		z-index: 10;
		overflow: hidden;
	}

		#bg:before {
			content: '';
			position: absolute;
			left: -1px;
			top: 1px;
			height: 100%;
			width: 100%;
			z-index: -1;
			background: url(./themes/fruit.jpg) 1px 23%;
			-webkit-filter: blur(7px);
		}

		#bg:after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			z-index: 20;
			background: rgba(0, 0, 0, 0.35);
			pointer-events: none;
		}

		#bg div {
			-moz-transform: translate(120%);
			-ms-transform: translate(120%);
			-o-transform: translate(120%);
			-webkit-transform: translate(120%);
			transform: translate(120%);
		}

	.scrollable p {
		padding: 30px;
		text-align: justify;
		line-height: 140%;
		font-size: 120%;
	}
</style>
</head>
<body>

<div style="padding: 1em 0;">
	<div id="slider1" class="csslider">
		<input type="radio" name="slides" id="slides_1" />
		<input type="radio" name="slides" id="slides_2" checked />
		<input type="radio" name="slides" id="slides_3" />
		<input type="radio" name="slides" id="slides_4" />
		<ul>
			<li>
				<h1>Say hello to CSS3</h1>
				<p>CSSlider is lightweight & easy to use slider. No JS - pure CSS.</p>
			</li>
			<li>
				<img src="./themes/stones.jpg" />
			</li>
			<li>
				<div id="bg">
					<div>
						<h1>CSS Events</h1>
						<p>When slide 3 is reached - play CSS animation!</p>
					</div>
				</div>
			</li>
			<li class="scrollable">
				<h1>Lots of text</h1>
				<h2>Scrollable one</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
					semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
					Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
					semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
					Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
					semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
					Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
					semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
					Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
					semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
					Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
					semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
				</p>
			</li>
		</ul>
		<div class="arrows">
			<label for="slides_1"></label>
			<label for="slides_2"></label>
			<label for="slides_3"></label>
			<label for="slides_4"></label>
		</div>
		<div class="navigation">
			<div>
				<label for="slides_1"></label>
				<label for="slides_2"></label>
				<label for="slides_3"></label>
				<label for="slides_4"></label>
			</div>
		</div>
	</div>
</div>

<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>